<!-- 我的弹窗 -->

<template>
  <WebModal large>
    <WebForm>
      <EasyRow col2>
        <div>
          <FormPhoto label="LOGO" bind="logo" folder="visitor" square required />
          <FormInput label="名称" bind="name" required />
          <FormTextarea label="地址" bind="address" :max="100" required />
        </div>

        <FormSlot bind="lon" tip="请选择定位" noLabel required>
          <div class="row10">
            <GaodeMap ref="gaode" @inited="setGaode" />
          </div>
        </FormSlot>
      </EasyRow>
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const MARKER = {
  icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
  offset: [-26.5, -60],
  draggable: true,
  cursor: 'move',
}

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixScreen()],

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听弹窗打开
     */
    visible(visible) {
      visible && this.setGaode()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 设置高德
     */
    setGaode() {
      const { map } = this.$refs.gaode || {}
      if (!map) return

      map.clearMap()

      const { lon, lat } = this.one
      if (!lon || !lat) return

      map.setCenter([lon, lat], true)
      map.setZoom(16, true)

      const { AMap } = window
      const marker = new AMap.Marker({ ...MARKER, map, position: [lon, lat] })
      AMap.plugin('AMap.Geocoder', () => {
        marker.on('dragend', ({ lnglat }) => {
          var geocoder = new AMap.Geocoder()
          geocoder.getAddress(lnglat, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              var address = result.regeocode.formattedAddress
              Object.assign(this.one, { lon: lnglat.lng, lat: lnglat.lat, address })
            }
          })
        })
      })
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
